<template>
    <CommonCard title="今日订单量" :value="numberFormat(orderToday)">
        <div ref="lineChartRef" style="width:100;height:100%"></div>
        <template #footer>
            <div>昨日订单量<span>{{ moneyFormat(orderLastDay) }}</span></div>
        </template>
    </CommonCard>
</template>
   
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
    name: 'TodayOrders'
});
</script>
<script lang="ts" setup>
import CommonCard from './CommonCard.vue';
import * as echarts from 'echarts'
import type { EchartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
import { computed, watch } from 'vue'

//store数据
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()
//元素对象
const lineChartRef = ref()
let lineChart: EchartsType

//计算属性获取数据值
//今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday)
//昨日订单
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
//订单趋势
const orderTrend = computed(() => reportDataStore.reportData.orderTrend)
//x轴数据
const orderTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)


//准备参数
const getOption = () => {
    return {
        xAxis: {
            boundaryGap: false,
            // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
            data: orderTrendAxis.value
        },
        yAxis: {
            show: false
        },
        tooltip: {
            trigger: 'axis',
            confine: true
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        series: {
            type: 'line',
            smooth: true,
            itemStyle: {
                opacity: 0
            },
            lineStyle: {
                opacity: 0
            },
            areaStyle: {
                color: 'purple'
            },
            // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
            data: orderTrend.value
        }

    }
}

onMounted(() => {
    lineChart = echarts.init(lineChartRef.value)
    // lineChart && lineChart.setOption(getOption())
    //当页面大小比例变化时，echarts图像比例大小也一起变化
    window.addEventListener('resize', () => {
        lineChart && lineChart.resize();
    })
})

//添加监视
watch(orderTrend, () => {
    lineChart && lineChart.setOption(getOption())
})
</script>
   
<style scoped></style>